<template>
<view>
  <uni-transition :duration="300" :mode-class="['fade']" :styles="maskClass" @click="togglePopup" :show="isPopupShow">
  </uni-transition>
  <uni-transition :duration="260" :mode-class="['slide-bottom']" :styles="popupTransfromClass" :show="isPopupShow">
  	<view class="order-reason-wrapper">
  		<view class="title">订单取消</view>
  		<view class="order-reason">
  			<view class="order-reason-tip">请选择取消订单原因</view>
			<view class="order-reason-item" v-for="(item, index) in reasonData" :key="index" @click="selectReasonMethod(item.id, item.label)">
				<view class="text">{{item.label}}</view>
				<view class="checkbox-wrapper" :class="{'on': currentId == item.id}">
					<image class="checkbox on" src="/static/checkbox_on.png"></image>
					<image class="checkbox off" src="/static/checkbox.png"></image>
				</view>
			</view>
  		</view>
  		<view class="order-reason-btn">
  			<view class="btn yello" @click="togglePopup">暂不取消</view>
  			<view class="btn oran" @click="handleSure">确定取消</view>
  		</view>
  	</view>
  </uni-transition>
</view>
</template>

<script>
import uniTransition from '@/components/uni-transition/uni-transition.vue'
export default {
  components: {uniTransition},
  props: {
	  isPopupShow: {
		  type: Boolean,
		  default: false
	  },
	  reasonId: {
		  type: String,
		  default: ""
	  },
	  orderId: {
		  type: String,
		  orderId: ''
	  }
  },
  data() {
    return {
      maskClass: {
      	'position': 'fixed',
      	'bottom': 0,
      	'top': 0,
      	'left': 0,
      	'right': 0,
      	'z-index': 10,
      	'background-color': 'rgba(0, 0, 0, 0.6)'
      },
      popupTransfromClass: {
      	'position': 'fixed',
      	'bottom': 0,
      	'left': 0,
      	'right': 0,
      	'z-index': 11,
      	'background-color': '#fff'
      },
	  currentId: "1",
	  currentLabel: '价格有点贵',
	  reasonData: [
		  {
			  id: "1",
			  label: '价格有点贵'
		  },
		  {
			  id: "2",
			  label: '规格/款式/数量拍错'
		  },
		  {
			  id: "3",
			  label: '收货地址拍错'
		  },
		  {
			  id: "4",
			  label: '暂时不需要了'
		  },
		  {
			  id: "5",
			  label: '其他'
		  }
	  ]
    }
  },
  watch: {
  },
  methods: {
    // 支付方式
    selectReasonMethod(reasonId, label) {
		this.currentLabel = label
    	this.currentId = reasonId
    },
	handleConfirmPay () {
	  this.$emit('handleConfirmPay', 'fu')
	},
	handleSure() {
		this.$emit('handleSure', this.currentLabel, this.orderId)
	},
	togglePopup() {
		this.$emit('togglePopup', !this.isPopupShow)
	}
  }
}
</script>

<style lang='scss' scoped>
  .order-reason-wrapper {
	height: 730rpx;
  	margin: 0 25rpx 0;
  
  	.title {
  		line-height: 80rpx;
  		font-size: 30rpx;
  		color: #333333;
		text-align: center;
		
  	}
	.title-tip {
		background-color: #eee;
		border-radius: 6rpx;
		padding: 10rpx 20rpx;
		font-size: 24rpx;
		color: #999;
		text-align: center;
	}
	
	.order-reason {
		padding: 20rpx 0;
		.order-reason-tip {
			color: #ccc;
			font-size: 24rpx;
		}
		.order-reason-item {
			display: flex;
			align-items: center;
			padding: 24rpx 0;
		  
			.text {
				flex: 1;
				line-height: 36rpx;
				font-size: 28rpx;
				color: #333333;
			}
		}
	}

  }
  .checkbox-wrapper {
  	display: flex;
  	align-items: center;
  	.checkbox {
  		width: 28rpx;
  		height: 28rpx;
  		&.on {
  			display: none;
  		}
  
  		&.off {
  			display: block;
  		}
  	}
  	&.on{
  		.checkbox.on{
  			display: block;
  		}
  		.checkbox.off{
  			display: none;
  		}
  	}
  }
  .order-reason-btn {
  	display: flex;
  	width: 100%;
  	border-radius: 40rpx;
  	overflow: hidden;
  
  	.btn {
  		flex: 1;
  		height: 80rpx;
  		line-height: 80rpx;
  		text-align: center;
  		font-size: 28rpx;
  		color: #fff;
  
  		&.yello {
  			background: linear-gradient(-90deg, #EB9946, #F7C75A);
  		}
  
  		&.oran {
  			background: linear-gradient(90deg, #EB7C3F, #EA5D2E);
  		}
  		&.off{
  			background: #BCBCBC;
  			color: #fff;
  		}
  	}
  }
</style>
